<template>
  <div class="">
    <!-- <p>count is {{ store.count }}</p>
    <p>doubleCount is {{ store.doubleCount }}</p> -->
    <p>count is {{ count }}</p>
    <p>doubleCount is {{ doubleCount }}</p>
    <p>
      <button @click="store.add(7)">add</button>
    </p>
    <p>
      <button @click="store.asyncAdd(9)">asyncAdd</button>
    </p>
  </div>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { useCounterStore } from '../stores/counter'
const store = useCounterStore()
// 只针对模型和计算属性，方法不要解构
const { count, doubleCount } = storeToRefs(store)
</script>

<style scoped></style>
